<!DOCTYPE html>
<html lang="en">
<head>
    {#  加载Django的static模板标签，允许在模板中引入静态资源  #}
    {% load static %}
    <meta charset="UTF-8">
    <title>{{ title }}</title>
{#    链接外部CSS样式表,link加载文件,rel="stylesheet"指文件跟当前网页的关系是“样式表，type="text/css"文件格式是 CSS。#}
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'layui/css/layui.css' %}">
{#    加载一个 JavaScript 文件，它能给我的网页增加一些交互功能#}
    <script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
</head>
<body>
<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                {# 第一个index代表mybabys文件中的urls.py中定义的路由命名控件namespace #}
                {# 第二个index代表项目引用index的urls.py中定义的路由的命名name #}
                <a href="{% url 'index:index' %}" title="母婴商城">
                    <img src="{% static 'img/logo.png' %}">
                </a>
            </h1>
            <div class="mallSearch">
                {# 访问地址暂时设置为首页，访问地址应该设置为商品列表，但是没有开发，暂时设置为首页 #}
                {# novalidate别自动做 HTML5 校验 #}
                <form action="{% url 'commodity:commodity' %}" method="get" class="layui-form" novalidate>
                    {# required-不能空 lay-verify="required"-额外再做一次“必填”校验，双重保险。autocomplete="off"-关掉浏览器自动提示历史记录。placeholder-灰色提示文字，告诉用户“该写啥”。 #}
                    <input type="text" name="n" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入需要的商品">
                    {# lay-submit-告诉 Layui 这是提交按钮 lay-filter="formDemo"-给按钮起个内部标记名，方便 Layui 做事件监听。#}
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        {#放一个放大镜图标，纯粹好看。 #}
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{# 导航栏 #}
<div class="content content-nav-base {{ classContent }}">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="{% url 'index:index' %}" {% if classContent == '' %}class="active"{% endif %}>
                        首页
                    </a>
                    <a href="{% url 'commodity:commodity' %}" {% if classContent == 'commoditys' %}class="active"{% endif %}>
                        所有商品
                    </a>
                    <a href="{% url 'shopper:shopcart' %}" {% if classContent == 'shopcarts' %}class="active"{% endif %}>
                        购物车
                    </a>
                    <a href="{% url 'shopper:shopper' %}" {% if classContent == 'informations' %}class="active"{% endif %}>
                        个人中心
                    </a>
                </div>
            </div>
        </div>
    </div>
    {# 使用Django内置模板语法block设置文件调用入口 #}
    {% block content %} {% endblock content %}
</div>
{% block footer %} {% endblock footer %}
<script type="text/javascript">
    {% block script %}{% endblock script %}
</script>
</body>
</html>